<template>
  <div class="image-upload">
    <div v-for="(item,i) in uploadsList" :key="`show-images-${i}`" class="image-upload-list" :style="{width:`${width}px`,height:`${height}px`,lineHeight:`${height}px`}">
      <template v-if="item.status === 'finished'">
        <img :src="item.url">
        <div class="image-upload-list-cover">
          <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
          <Icon v-if="!disabled" type="ios-trash-outline" @click.native="handleRemove(i)"></Icon>
        </div>
      </template>
      <template v-else>
        <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
      </template>
    </div>
    <Upload
      v-show="!uploadsList.length && !disabled"
      :action="uploadUrl"
      :accept="accept"
      :show-upload-list="false"
      :with-credentials="true"
      :default-file-list="defaultList"
      :on-success="handSuccess"
      :max-size="maxFileSize"
      :on-exceeded-size="handleMaxSize"
      :style="{width:`${width}px`,height:`${height}px`}"
      :class="{'image-upload-component':true,'disabled':disabled}"
      ref="upload" type="drag" name="upload">
      <div :style="{width:`${width-2}px`,height:`${height-2}px`,lineHeight:`${height+4}px`}">
        <Icon type="camera" :size="Number.parseInt(height/2)"></Icon>
      </div>
    </Upload>
    <div v-show="!uploadsList.length && disabled" class="image-upload-list" :style="{width:`${width}px`,height:`${height}px`,lineHeight:`${height}px`}">
      <div :style="{width:`${width-2}px`,height:`${height-2}px`,lineHeight:`${height-2}px`}">
        <Icon type="image" :size="Number.parseInt(height/2)" style="vertical-align:middle;"></Icon>
      </div>
    </div>
  </div>
</template>
<style lang="less">
  .image-upload{
    display: inline-block;
    .image-upload-component{
      display: inline-block;vertical-align: middle;
      .ivu-upload-drag{width: 100%;height: 100%;}
    }
    .image-upload-list{
      position: relative;display: inline-block; text-align: center; border: 1px solid transparent; border-radius: 4px;
      overflow: hidden;background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.2);vertical-align: middle;
    }
    .image-upload-list img{
      width: 100%;height: 100%;
    }
    .image-upload-list-cover{
      display: none;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,.6);
    }
    .image-upload-list:hover .image-upload-list-cover{
      display: block;
    }
    .image-upload-list-cover i{
      color: #fff;font-size: 20px;cursor: pointer;margin: 0 2px;
    }
  }
</style>

<script>
  import config from '@/config'

  export default {
    props:{
      action:{type:String,required:true},
      accept:{type:String,default:'image/png,image/jpeg'},
      maxFileSize:{type:Number,default:2048},
      width :{type:Number,default:54},
      height:{type:Number,default:54},
      images:{type:Array,default:() => { return [];}},
      disabled:{type:Boolean,default:true}
    },
    mounted(){
      this.uploadsList = this.$refs.upload.fileList;
    },
    data(){
      return {
        defaultList:this.images,
        uploadsList:[],

        visible:false,
        imgName:''
      };
    },
    watch:{
      images(v){
        this.defaultList = [...v];
        this.$nextTick(() => {
          this.uploadsList = this.$refs.upload.fileList;
        });
      }
    },
    computed:{
      uploadUrl(){
        let url = `${config.API_HOST}${this.action}`;
        return url;
      }
    },
    methods:{
      handleView(url){
        this.$Modal.info({
          title:'查看图片',
          render:(h) => {
            let img = h('img',{
              attrs:{
                src:url,
              },
              style:{width:'100%'}
            });
            return img;
          }
        });
      },
      handleRemove(index){
        this.$refs.upload.fileList.splice(index, 1);
      },
      handleMaxSize(file){
        this.$Notice.warning({
          title: '超过文件大小限制',
          desc: '图片 ' + file.name + ' 超过文件大小限制, 请上传不超过' + this.maxFileSize + 'KB的图片'
        });
      },
      handSuccess(res,file){
        // file.url = res.data;
        this.$emit('on-success', {file,res});
      },
      reset(){
        this.$refs.upload.clearFiles();
      }
    }
  }
</script>
